import { Fragment } from '@/components/Fragment'; 
import { Link as AmplifyLink } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { LinkDemo } from './demo';
import {
  DefaultLinkExample,
  ExternalLinkExample,
  LinkGlobalStylingExample,
  LinkStylePropsExample,
  LinkThemeExample,
} from './examples';

## Demo

<LinkDemo />

## Usage

Import the Link component. Link renders an anchor element `<a>` by default, which accepts an `href` attribute that specifies the Link's destination.

<Example>
  <DefaultLinkExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultLinkExample.tsx

    ```

  </ExampleCode>
</Example>

### External Links

To create a Link which opens in a new tab, use the `isExternal` prop. Under the hood, `isExternal` sets `target="_blank"` and `rel="noopener noreferrer"` on the `<a>` anchor element. 

<Example>
  <ExternalLinkExample />
  <ExampleCode>
    ```jsx file=./examples/ExternalLinkExample.tsx

    ```

  </ExampleCode>
</Example>

### Routing Libraries

You can use a Link with any React routing library that supports custom components. Below is an example using Link with React Router v5, in which the Link is passed to the `component` prop as a custom navigation component:

<Example>
  <ExampleCode>
    ```jsx
    import { Link, Flex, Heading } from '@aws-amplify/ui-react';

    import {
      BrowserRouter as Router,
      Link as ReactRouterLink,
      Routes,
      Route,
    } from 'react-router-dom';

    function Home() {
      return <Heading level={2}>Home</Heading>;
    }

    function About() {
      return <Heading level={2}>About</Heading>;
    }

    function Users() {
      return <Heading level={2}>Users</Heading>;
    }

    function App() {
      return (
        <Router>
          <Flex>
            <ReactRouterLink to="/" component={Link}>Home</ReactRouterLink>
            <ReactRouterLink to="/about" component={Link}>About</ReactRouterLink>
            <ReactRouterLink to="/users" component={Link}>Users</ReactRouterLink>
          </Flex>

          <Routes>
            <Route path="/about" element={<About />} />
            <Route path="/users" element={<Users />} />
            <Route path="/" element={<Home />} />
          </Routes>
        </Router>
      );
    }

    export default App;
    ```
  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Link">
  <Example>
    <LinkThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/LinkThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Link" />

### Global Styling

To override styling on all Links, you can set the Amplify CSS variables or use the built in `.amplify-link` class.

#### CSS Pseudo-classes

To style the Link component in different states, you can use any of these four CSS Pseudo-classes: `:active`, `:focus`, `:hover` and `:visited`.

<Example>
  <LinkGlobalStylingExample />
  <ExampleCode>
    ```css
    /* styles.css */
    [data-amplify-theme] {
      --amplify-components-link-color: var(--amplify-colors-purple-80);
      --amplify-components-link-hover-color: var(--amplify-colors-purple-60);
    }
    /* OR */
    .amplify-link {
      color: var(--amplify-colors-purple-80);
    }
    .amplify-link:hover {
      color: var(--amplify-colors-purple-60);
    }
    ```
  </ExampleCode>
</Example>

### Local Styling

To override styling on a specific Link, you can use (in order of increasing specificity): a class selector or style props.

_Using a class selector:_

<Example>
  <AmplifyLink className="link-local-styles">My Custom Link</AmplifyLink>
  <ExampleCode>
    ```css
    /* styles.css */
    .link-local-styles {
      color: var(--amplify-colors-blue-80);
      font-weight: var(--amplify-font-weights-bold);
    }

    .link-local-styles:hover {
      color: var(--amplify-colors-blue-60);
    }

    .link-local-styles:active {
      color: var(--amplify-colors-green-80);
    }
    ```

  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <Link className="link-local-styles">My Custom Link</Link>;
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <LinkStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/LinkStylePropsExample.tsx
    
    ```

  </ExampleCode>
</Example>